<template>
  <div class="about">
    <van-nav-bar
    title="添加"
    left-text="返回"
    left-arrow
    @click-left="$router.go(-1)"
    />
   
    <div>
        <!-- 手机号码 -->
        <h4>手动输入手机号码添加</h4>
        <!-- 可以使用 CellGroup 作为容器 -->
        <van-cell-group inset>
           <van-field v-model="form.tel"  placeholder="请输入用户名" />
        </van-cell-group>
         <div class="icon">
            <h5>请选择标记类型 (非必选)</h5>
            <div class="flex">
                <div class="icon-list" v-for="(item,index) in iconList" :key="index" @click="clickIcon(item)">
                    <van-image
                    width="50"
                    height="50"
                    :src="require(`../assets/icon/${form.tag == item.selectIcon?item.selectIcon:item.icon}`)"
                    />
                  <p>{{item.text}}</p>
               

            </div>
            </div>
          
         </div>

        <van-button type="primary" block @click="add">{{index?'编辑黑名单':'添加黑名单'}}</van-button>
    </div>
    
  </div>
</template>
<script>
import {ref,reactive,toRefs} from 'vue'
import {useRouter,useRoute} from 'vue-router'
import {useStore} from 'vuex'
import { Toast } from 'vant';
import axios from 'axios'
export default {
    setup(props) {
        const route = useRoute()
        // 获取url上的参数   index存在就是编辑，不存在就是添加
        const index = route.query.id
        const {state,commit} = useStore()
        const router = useRouter()
        const data = reactive({
            form:{
                tel:'',//手机号
                tag:'',//标记的字段
                tagName:'',//标记的文字
            },
            iconList:[],//存放请求过来的数据
        })
        // 回显数据  判断url的参数存在不存在
        if(index){
            data.form = state.list[index]
        }
        // 添加黑名单 或者编辑黑名单
        const add = ()=>{
            let reg = /^1[3-9][\d]{9}/
            // 判空
            if(!data.form.tel.length){
                Toast.fail('手机号不能为空');
                return false
            }
            if(!reg.test(data.form.tel)){
                Toast.fail('手机号格式不正确');
                return false
            }
           
         
  
            // 判断是添加还是编辑
            if(index){
                commit('edit',{index:index,form:data.form})
                router.back()
            }else{
                 // 排重
                  let flag =  state.list.some(item=>item.tel==data.form.tel)
                  if(flag){
                    Toast.fail('手机号存在');
                  }else{
                      commit('add',data.form)
                    router.back()
                  }
               
            }
           
            

        

        }
        // 请求数据
        axios.get('iconList.json').then(res=>{
            console.log(res);
            data.iconList = res.data
        })
        
        // 点击标记
        const clickIcon = (item)=>{
            data.form.tag = item.selectIcon
            data.form.tagName = item.text


        }
        return {...toRefs(data),add,clickIcon,index}
    }
}
</script>
<style lang="scss" scoped>
.flex{
    width:100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    // padding: 10px 16px;
    >div{
        text-align: center;
    }
}
</style>

